<template>
  <div class="map_position">
    <div id="mapContainer" style="width: 100%; height: 500px"></div>
    <div class="map_position-panel"></div>
  </div>
</template>

<script setup name="MapPosition">
import { ref, onMounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";

const map = ref(null);
const marker = ref(null);
const props = defineProps({
  position: {
    type: Array,
    default: () => [104.063403, 30.568744],
  },
});

onMounted(() => {
  window._AMapSecurityConfig = {
    securityJsCode: "8081606dcae9578763f8339b843f6d67",
  };
  AMapLoader.load({
    key: "755572ca458d415727a999078c4a5c30",
    version: "2.0",
  })
    .then((AMap) => {
      map.value = new AMap.Map("mapContainer", {
        zoom: 15,
        center: props.position, //地图中心位置
      });

      // 给地图添加点
      marker.value = new AMap.Marker({
        position: props.position, //位置
      });
      map.value.add(marker); //添加到地图

      // 监听地图点击事件
      map.value.on("click", (e) => {
        // e.lnglat 获取点击的经纬度
        const { lng, lat } = e.lnglat;
        console.log(`点击位置的经度：${lng}, 纬度：${lat}`);
      });
    })
    .catch((e) => {
      console.error(e); //加载错误提示
    });
});
</script>

<style lang="scss">
.map_position {
  position: relative;

  &-panel {
    width: 200px;
    height: 40px;
    background-color: pink;
    position: absolute;
    left: 0;
    top: 0;
  }
}
</style>
